<!-- 计分方式：分段评估 团体问答报告 -->

<!-- 报告名称 -->
<h2>{$data['title']}</h2>

<!-- 问答团体信息 -->
<div class="top_info">
    <div class="nowrap left" style="width: 50%;">所属单位：{$asOrder['team_name']}</div>
    <div class="nowrap left" style="width: 50%;">参与人数：{$data['asRecordCount']}</div>
    <div class="nowrap left" style="width: 50%;">问答单位：{$data['companyInfo']['name']}</div>
    <div class="nowrap left" style="width: 50%;">问答时间：{$asOrder['update_time']}</div>
    <div class="nowrap left" style="width: 50%;">问答名称：{$qaMain['title']}</div>
</div>

<!-- 评估标准 -->
<div>
    <p>{$qaMain['standard']}</p>
</div>

{if $data['asRecordCount'] > 0}
<!-- <h3>总分图表</h3> -->
<div class="bar_chart" style="display: flex;margin-top: 2em;">
    <!-- 总分柱状图 -->
    <div id="barChart" style="width: 50%;height:300px;"></div>
    <!-- 状态分布饼图 -->
    <div id="statusPieChart" style="width: 50%;height:300px;"></div>
</div>
<!-- 文字性总结 -->
<ul class="report-list">
    <li class="factor">
        <div>
            <b>主要状态分布：</b>
            {foreach $data.statusPieChart as $key=>$vo }
            <span>{$vo.name}{$vo.value}人，占比{$vo['percent']}%；</span>
            {/foreach}
        </div>
    </li>
</ul>
{/if}


{if $data['classifyPieChart']}

<div class="bie_chart">
    <!-- 症状分布饼图 -->
    <div id="classifyPieChart" style="width: 100%;height:300px;margin: auto;"></div>
</div>

<!-- 文字性总结 -->
<ul class="report-list">
    <li class="factor">
        <div><b>主要症状分布：</b>
            {foreach $data.classifyPieChart as $key=>$vo }
            <span>{$vo.name}{$vo.value}人；</span>
            {/foreach}
        </div>
    </li>
</ul>

{/if}

<!-- 问答介绍 -->
<div style="margin-top: 2em;">
    <p>{$qaMain['content']}</p>
</div>

<!-- 公众号 客服号 [二维码入口] -->
<div class="qr_img_list">
    <div>
        <img src="{$data['companyInfo']['img_wx_official']}">
        <div>公众号</div>
    </div>
    <div>
        <img src="{$data['companyInfo']['img_wx_service']}">
        <div>公众号</div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        // 总分柱状图
        var barChart = echarts.init(document.getElementById('barChart'), null, {
            renderer: 'svg',
            useDirtyRect: false
        });
        barChart.setOption({
            title: {
                text: '总分图表',
                subtext: '',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: $.parseJSON('{$data["barChart"]["xData"]}')
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: $.parseJSON('{$data["barChart"]["yData"]}'),
                    axisTick: {
                        alignWithLabel: true
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontWeight: 'bold'
                        }
                    },
                    type: 'bar'
                }
            ]
        });


        // 状态分布饼图-总体评估
        var statusPieChart = echarts.init(document.getElementById('statusPieChart'), null, {
            renderer: 'svg',
            useDirtyRect: false
        });
        statusPieChart.setOption({
            title: {
                text: '状态分布',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            // legend: {
            //     orient: 'vertical',
            //     left: 'left'
            // },
            series: [
                {
                    name: '状态',
                    type: 'pie',
                    radius: '50%',
                    data: $.parseJSON('{$data["statusPieChartJson"]}'),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });

        // 症状分布饼图
        var classifyPieChart = echarts.init(document.getElementById('classifyPieChart'), null, {
            renderer: 'svg',
            useDirtyRect: false
        });
        classifyPieChart.setOption({
            title: {
                text: '主要症状分布',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            // legend: {
            //     orient: 'vertical',
            //     left: 'left'
            // },
            series: [
                {
                    name: '症状',
                    type: 'pie',
                    radius: '50%',
                    data: $.parseJSON('{$data["classifyPieChartJson"]}'),
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
    });
</script>

<style>
    .bie_chart {
        display: flex;
    }
</style>